<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贪吃蛇游戏</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body,html{
				background: #2b2a34;
			}
			#snake-panel{
				position: relative;
				width: 750px;
				height: 410px;
				margin: 0px auto;
				background: #2b2a34;
				overflow: hidden;
				box-sizing: border-box;
				border: 5px solid #ffc228;
			}
			.integral-box{
				display: flex;
				justify-content: space-between;
				width: 750px;
				height: 70px;
				line-height: 70px;
				margin: 0px auto 20px;
				color: #ffc228;
				font-family: fantasy;
				font-size: 32px;
				border-bottom: 5px solid #ffc228;
			}
			.integral-box span{
				display: inline-block;
				width: 100px;
			}
			#history{
				text-align: center;
			}
			#Level{
				text-align: right;
			}
			.desc{
				height: 70px;
				width: 750px;
				line-height: 70px;
				margin: 0px auto 20px;
				color: #ffc228;
				font-size: 30px;
				font-family: fantasy;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="integral-box">
			<div>Score:<span id='integral'>0000</span></div>
			<div>Hiscore:<span id='history'>0000</span></div>
			<div>Level:<span id='Level'>0</span></div></div>
		<div id="snake-panel"></div>
		<div class="desc">Press WASD to control the snake's movement direction</div>
		<script src="./js/lodash.min.js"></script>
		<script src="./js/score.js"></script>
		<script src="./js/food.js"></script>
		<script src="./js/snake.js"></script>
		<script src="./js/game.js"></script>
		<script type="text/javascript">
			
			let game = new Game('#snake-panel','#integral')
			game.render()
			game.run();
		</script>
	</body>
</html>
